<template>
	<uni-popup
		class="uni-popup"
		ref="ref_popup"
		type="bottom"
		background-color="#fff"
		border-radius="10px 10px 0 0"
	>
		<view class="title">
			<view class="left"></view>
			<view class="center">壁纸信息</view>

			<view class="box-close">
				<uni-icons type="closeempty" class="deep-size" @click="close_popup"></uni-icons>
			</view>
		</view>
		<scroll-view class="scroll-view" scroll-y="true">
			<view class="popup-label-bar">
				<view class="bar-title">壁纸ID</view>
				<view class="bar-text">{{ image_data.id }}</view>
			</view>

			<view class="popup-label-bar">
				<view class="bar-title">作者</view>
				<view class="bar-text">{{ image_data.author }}</view>
			</view>
			<view class="popup-label-bar">
				<view class="bar-title">描述</view>
				<view class="bar-text">{{ image_data.description }}</view>
			</view>

			<view class="popup-label-bar">
				<view class="bar-title">评分</view>
				<view class="bar-text">
					<view class="box-rate">
						<!-- 选择半星 -->
						<uni-rate readonly allow-half :value="3" />
						<text class="text">{{ image_data.rate }}分</text>
					</view>
				</view>
			</view>

			<view class="popup-label-bar">
				<view class="bar-title">标签</view>
				<view class="bar-text">
					<view v-for="i in image_data.tag.split(',')" class="box-tag">
						<view class="tag">{{ i }}</view>
					</view>
				</view>
			</view>

			<view class="box-comment">
				<text class="title">评论</text>
				<view class="content" v-for="i in 5" :key="i">
					<image
						class="user-image"
						:src="`http://139.9.35.15:6080/static/wallpaper/category/14/img${i}.jpg`"
						mode="aspectFill"
					></image>
					<view class="user-msg">
						<view class="name">天真的小明</view>
						<view class="text">
							性价比极高，产品质量超乎想象，发货速度快包装精美，孩子很爱吃
						</view>
						<view class="date-love">
							<text>{{ i }}小时前·广西</text>
							<text>♡99</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</uni-popup>
</template>

<script setup>
import { reactive, ref, defineProps } from 'vue'

defineProps(['image_data'])

const ref_popup = ref()

const open_popup = function () {
	ref_popup.value.open()
}

const close_popup = function () {
	ref_popup.value.close()
}

defineExpose({
	open_popup
})
</script>

<style scoped lang="scss">
.uni-popup {
	font-size: 32rpx;
	.title {
		font-size: 29rpx;
		margin: 20rpx 40rpx;
		@extend .f-c-c;
		justify-content: space-between;
		color: #888;
	}

	.scroll-view {
		margin: 20rpx;
		max-height: 45vh;

		.popup-label-bar {
			margin: 40rpx 0;
			display: flex;
			justify-content: start;

			.bar-title {
				color: #888;
				width: 160rpx;
				display: flex;
				justify-content: end;

				&::after {
					content: ':';
				}
			}

			.bar-text {
				margin-left: 20rpx;
				// 数字和单词默认为一个单词，不会发生换行，除非你设置word-wrap：break-work
				word-wrap: break-word;
				width: 480rpx;

				.box-tag {
					display: inline-flex;
					margin: 5rpx;

					.tag {
						font-size: 29rpx;
						padding: 0 20rpx;
						color: $my-color1;
						border: 1rpx solid $my-color1;
						border-radius: 100rpx;
					}
				}

				.box-rate {
					display: flex;
					.text {
						color: #ffca3e;
						margin-left: 30rpx;
					}
					::v-deep .uni-icons.uniui-star-filled {
						font-size: 50rpx !important;
					}
				}
			}
		}

		.text-uni-popup {
			color: blue;
			height: 300rpx;
		}
	}

	.box-comment {
		// border: 1px solid;
		border-radius: 10px;
		box-shadow: 0 0 20px #ddd;
		padding: 10rpx 20rpx 150rpx 20rpx;
		width: 600rpx;
		margin-left: 40rpx;
		.title {
			margin-bottom: 20rpx;
			margin-left: 260rpx;
		}
		.content {
			display: flex;
			justify-content: start;
			align-items: start;
			margin-bottom: 30rpx;
			.user-image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.user-msg {
				margin-left: 20rpx;
				flex: 1;
				.name {
					font-size: 29rpx;
					line-height: 32rpx;
					font-weight: 900rpx;
					color: #888;
				}
				.text {
					// margin-top: 0.4em;
				}
				.date-love {
					color: #888;
					font-size: 25rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
